<!--  -->
<template>
  <!-- 注意，使用 autoResize 配置时，需要在画布容器外面再套一层宽高都是 100% 的外层容器，在外层容器上监听尺寸改变，当外层容器大小改变时，画布自动重新计算宽高以及元素位置。 -->
  <div style="width:100%; height:100%">
    <div id="container" style="min-width: 400px; min-height: 600px"></div>
  </div>
</template>

<script >
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { Graph, Shape } from "@antv/x6";
import { Stencil } from "@antv/x6-plugin-stencil";
import { Transform } from "@antv/x6-plugin-transform";
import { Selection } from "@antv/x6-plugin-selection";
import { Snapline } from "@antv/x6-plugin-snapline";
import { Keyboard } from "@antv/x6-plugin-keyboard";
import { Clipboard } from "@antv/x6-plugin-clipboard";
import { History } from "@antv/x6-plugin-history";
import insertCss from "insert-css";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    init() {
      const data = {
        nodes: [
          {
            id: "node1",
            shape: "rect",
            x: 40,
            y: 40,
            width: 100,
            height: 40,
            label: "hello",
            attrs: {
              // body 是选择器名称，选中的是 rect 元素
              body: {
                stroke: "#8f8f8f",
                strokeWidth: 1,
                fill: "#fff",
                rx: 6,
                ry: 6,
              },
            },
          },
          {
            id: "node2",
            shape: "rect",
            x: 160,
            y: 180,
            width: 100,
            height: 40,
            label: "world",
            attrs: {
              body: {
                stroke: "#8f8f8f",
                strokeWidth: 1,
                fill: "#fff",
                rx: 6,
                ry: 6,
              },
            },
          },
        ],
        edges: [
          {
            shape: "edge",
            source: "node1",
            target: "node2",
            label: "x6",
            attrs: {
              // line 是选择器名称，选中的边的 path 元素
              line: {
                stroke: "#8f8f8f",
                strokeWidth: 1,
              },
            },
          },
        ],
      };
      const graph = new Graph({
        container: document.getElementById("graph-container"),
        grid: true,
        mousewheel: {
          enabled: true,
          zoomAtMousePosition: true,
          modifiers: "ctrl",
          minScale: 0.5,
          maxScale: 3,
        },
        connecting: {
          router: "manhattan",
          connector: {
            name: "rounded",
            args: {
              radius: 8,
            },
          },
          anchor: "center",
          connectionPoint: "anchor",
          allowBlank: false,
          snap: {
            radius: 20,
          },
          createEdge() {
            return new Shape.Edge({
              attrs: {
                line: {
                  stroke: "#A2B1C3",
                  strokeWidth: 2,
                  targetMarker: {
                    name: "block",
                    width: 12,
                    height: 8,
                  },
                },
              },
              zIndex: 0,
            });
          },
          validateConnection({ targetMagnet }) {
            return !!targetMagnet;
          },
        },
        highlighting: {
          magnetAdsorbed: {
            name: "stroke",
            args: {
              attrs: {
                fill: "#5F95FF",
                stroke: "#5F95FF",
              },
            },
          },
        },
      });
      // #region 使用插件
      graph
          .use(
              new Transform({
                resizing: true,
                rotating: true,
              })
          )
          .use(
              new Selection({
                rubberband: true,
                showNodeSelectionBox: true,
              })
          )
          .use(new Snapline())
          .use(new Keyboard())
          .use(new Clipboard())
          .use(new History());
      // #endregion

      // #region 初始化 stencil
      const stencil = new Stencil({
        title: "流程图",
        target: graph,
        stencilGraphWidth: 200,
        stencilGraphHeight: 180,
        collapsable: true,
        groups: [
          {
            title: "基础流程图",
            name: "group1",
          },
          {
            title: "系统设计图",
            name: "group2",
            graphHeight: 250,
            layoutOptions: {
              rowHeight: 70,
            },
          },
        ],
        layoutOptions: {
          columns: 2,
          columnWidth: 80,
          rowHeight: 55,
        },
      });
      document.getElementById("stencil").appendChild(stencil.container);
      // #endregion

      // #region 快捷键与事件
      graph.bindKey(["meta+c", "ctrl+c"], () => {
        const cells = graph.getSelectedCells();
        if (cells.length) {
          graph.copy(cells);
        }
        return false;
      });
      graph.bindKey(["meta+x", "ctrl+x"], () => {
        const cells = graph.getSelectedCells();
        if (cells.length) {
          graph.cut(cells);
        }
        return false;
      });
      graph.bindKey(["meta+v", "ctrl+v"], () => {
        if (!graph.isClipboardEmpty()) {
          const cells = graph.paste({ offset: 32 });
          graph.cleanSelection();
          graph.select(cells);
        }
        return false;
      });

      // undo redo
      graph.bindKey(["meta+z", "ctrl+z"], () => {
        if (graph.canUndo()) {
          graph.undo();
        }
        return false;
      });
      graph.bindKey(["meta+shift+z", "ctrl+shift+z"], () => {
        if (graph.canRedo()) {
          graph.redo();
        }
        return false;
      });

      // select all
      graph.bindKey(["meta+a", "ctrl+a"], () => {
        const nodes = graph.getNodes();
        if (nodes) {
          graph.select(nodes);
        }
      });

      // delete
      graph.bindKey("backspace", () => {
        const cells = graph.getSelectedCells();
        if (cells.length) {
          graph.removeCells(cells);
        }
      });

      // zoom
      graph.bindKey(["ctrl+1", "meta+1"], () => {
        const zoom = graph.zoom();
        if (zoom < 1.5) {
          graph.zoom(0.1);
        }
      });
      graph.bindKey(["ctrl+2", "meta+2"], () => {
        const zoom = graph.zoom();
        if (zoom > 0.5) {
          graph.zoom(-0.1);
        }
      });

      // 控制连接桩显示 / 隐藏;
      const showPorts = (ports, show) => {
        for (let i = 0, len = ports.length; i < len; i += 1) {
          ports[i].style.visibility = show ? "visible" : "hidden";
        }
      };
      graph.on("node:mouseenter", () => {
        const container = document.getElementById("graph-container");
        const ports = container.querySelectorAll(".x6-port-body");
        showPorts(ports, true);
      });
      graph.on("node:mouseleave", () => {
        const container = document.getElementById("graph-container");
        const ports = container.querySelectorAll(".x6-port-body");
        // if (this.isPortsShow) return
        showPorts(ports, false);
      });
      // #endregion

      // #region 初始化图形
      const ports = {
        groups: {
          top: {
            position: "top",
            attrs: {
              circle: {
                r: 4,
                magnet: true,
                stroke: "#5F95FF",
                strokeWidth: 1,
                fill: "#fff",
                style: {
                  visibility: "hidden",
                },
              },
            },
          },
          right: {
            position: "right",
            attrs: {
              circle: {
                r: 4,
                magnet: true,
                stroke: "#5F95FF",
                strokeWidth: 1,
                fill: "#fff",
                style: {
                  visibility: "hidden",
                },
              },
            },
          },
          bottom: {
            position: "bottom",
            attrs: {
              circle: {
                r: 4,
                magnet: true,
                stroke: "#5F95FF",
                strokeWidth: 1,
                fill: "#fff",
                style: {
                  visibility: "hidden",
                },
              },
            },
          },
          left: {
            position: "left",
            attrs: {
              circle: {
                r: 4,
                magnet: true,
                stroke: "#5F95FF",
                strokeWidth: 1,
                fill: "#fff",
                style: {
                  visibility: "hidden",
                },
              },
            },
          },
        },
        items: [
          {
            group: "top",
          },
          {
            group: "right",
          },
          {
            group: "bottom",
          },
          {
            group: "left",
          },
        ],
      };

      Graph.registerNode(
          "custom-rect",
          {
            inherit: "rect",
            width: 66,
            height: 36,
            attrs: {
              body: {
                strokeWidth: 1,
                stroke: "#5F95FF",
                fill: "#EFF4FF",
              },
              text: {
                fontSize: 12,
                fill: "#262626",
              },
            },
            ports: { ...ports },
          },
          true
      );

      Graph.registerNode(
          "custom-polygon",
          {
            inherit: "polygon",
            width: 66,
            height: 36,
            attrs: {
              body: {
                strokeWidth: 1,
                stroke: "#5F95FF",
                fill: "#EFF4FF",
              },
              text: {
                fontSize: 12,
                fill: "#262626",
              },
            },
            ports: {
              ...ports,
              items: [
                {
                  group: "top",
                },
                {
                  group: "bottom",
                },
              ],
            },
          },
          true
      );

      Graph.registerNode(
          "custom-circle",
          {
            inherit: "circle",
            width: 45,
            height: 45,
            attrs: {
              body: {
                strokeWidth: 1,
                stroke: "#5F95FF",
                fill: "#EFF4FF",
              },
              text: {
                fontSize: 12,
                fill: "#262626",
              },
            },
            ports: { ...ports },
          },
          true
      );

      Graph.registerNode(
          "custom-image",
          {
            inherit: "rect",
            width: 52,
            height: 52,
            markup: [
              {
                tagName: "rect",
                selector: "body",
              },
              {
                tagName: "image",
              },
              {
                tagName: "text",
                selector: "label",
              },
            ],
            attrs: {
              body: {
                stroke: "#5F95FF",
                fill: "#5F95FF",
              },
              image: {
                width: 26,
                height: 26,
                refX: 13,
                refY: 16,
              },
              label: {
                refX: 3,
                refY: 2,
                textAnchor: "left",
                textVerticalAnchor: "top",
                fontSize: 12,
                fill: "#fff",
              },
            },
            ports: { ...ports },
          },
          true
      );

      const r1 = graph.createNode({
        shape: "custom-rect",
        label: "开始",
        attrs: {
          body: {
            rx: 20,
            ry: 26,
          },
        },
      });
      const r2 = graph.createNode({
        shape: "custom-rect",
        label: "过程",
      });
      const r3 = graph.createNode({
        shape: "custom-rect",
        attrs: {
          body: {
            rx: 6,
            ry: 6,
          },
        },
        label: "可选过程",
      });
      const r4 = graph.createNode({
        shape: "custom-polygon",
        attrs: {
          body: {
            refPoints: "0,10 10,0 20,10 10,20",
          },
        },
        label: "决策",
      });
      const r5 = graph.createNode({
        shape: "custom-polygon",
        attrs: {
          body: {
            refPoints: "10,0 40,0 30,20 0,20",
          },
        },
        label: "数据",
      });
      const r6 = graph.createNode({
        shape: "custom-circle",
        label: "连接",
      });
      stencil.load([r1, r2, r3, r4, r5, r6], "group1");

      const imageShapes = [
        {
          label: "Client",
          image:
              "https://gw.alipayobjects.com/zos/bmw-prod/687b6cb9-4b97-42a6-96d0-34b3099133ac.svg",
        },
        {
          label: "Http",
          image:
              "https://gw.alipayobjects.com/zos/bmw-prod/dc1ced06-417d-466f-927b-b4a4d3265791.svg",
        },
        {
          label: "Api",
          image:
              "https://gw.alipayobjects.com/zos/bmw-prod/c55d7ae1-8d20-4585-bd8f-ca23653a4489.svg",
        },
        {
          label: "Sql",
          image:
              "https://gw.alipayobjects.com/zos/bmw-prod/6eb71764-18ed-4149-b868-53ad1542c405.svg",
        },
        {
          label: "Clound",
          image:
              "https://gw.alipayobjects.com/zos/bmw-prod/c36fe7cb-dc24-4854-aeb5-88d8dc36d52e.svg",
        },
        {
          label: "Mq",
          image:
              "https://gw.alipayobjects.com/zos/bmw-prod/2010ac9f-40e7-49d4-8c4a-4fcf2f83033b.svg",
        },
      ];
      const imageNodes = imageShapes.map((item) =>
          graph.createNode({
            shape: "custom-image",
            label: item.label,
            attrs: {
              image: {
                "xlink:href": item.image,
              },
            },
          })
      );
      stencil.load(imageNodes, "group2");
    },

    preWork() {
      // 这里协助演示的代码，在实际项目中根据实际情况进行调整
      const container = document.getElementById("container");
      const stencilContainer = document.createElement("div");
      stencilContainer.id = "stencil";
      const graphContainer = document.createElement("div");
      graphContainer.id = "graph-container";
      container.appendChild(stencilContainer);
      container.appendChild(graphContainer);

      insertCss(`
        #container {
          display: flex;
          border: 1px solid #dfe3e8;
        }
        #stencil {
          width: 180px;
          height: 100%;
          position: relative;
          border-right: 1px solid #dfe3e8;
        }
        #graph-container {
          width: calc(100% - 180px);
          height: 100%;
        }
        .x6-widget-stencil  {
          background-color: #fff;
        }
        .x6-widget-stencil-title {
          background-color: #fff;
        }
        .x6-widget-stencil-group-title {
          background-color: #fff !important;
        }
        .x6-widget-transform {
          margin: -1px 0 0 -1px;
          padding: 0px;
          border: 1px solid #239edd;
        }
        .x6-widget-transform > div {
          border: 1px solid #239edd;
        }
        .x6-widget-transform > div:hover {
          background-color: #3dafe4;
        }
        .x6-widget-transform-active-handle {
          background-color: #3dafe4;
        }
        .x6-widget-transform-resize {
          border-radius: 0;
        }
        .x6-widget-selection-inner {
          border: 1px solid #239edd;
        }
        .x6-widget-selection-box {
          opacity: 0;
        } `);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.preWork();
    this.init();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
#container {
  width: 100%;
  height: 100%;
}
</style>